window.onload = function () {
    var oTitle1 = document.querySelector('#filter-tit-1'); // 左侧选项卡
    var oTitle2 = document.querySelector('#filter-tit-2'); // 右侧选项卡
    var oCon1 = document.querySelector('#filter-con-1'); // 左侧选项展开框
    var oCon2 = document.querySelector('#filter-con-2'); // 右侧选项展开框
    var aUl = oCon2.querySelectorAll('ul');
    var oMore = document.querySelector('.list-more'); // 加载中...
    var oList = document.querySelector('.list'); // 列表页
    var oConTop = getTop(oList); // 列表页距离顶部距离
    var aSelect = oCon1.querySelectorAll('li'); // 左侧高升专, 专升本选项
    var oldSelect = aSelect[0]; // 左侧默认选中项
    var oldUl = aUl[0]; // 右侧默认选中ul
    var oldLi = null; // 右侧默认选中ul的默认选中li

    var arg1 = document.getElementById('type').value;
    var arg2 = 0;

    var oldY = 0;
    var diffY = 0;
    var diffT = 0;
    var count = 0;
    var oUlHeight = 0;
    var oUl = null;

    var flag = true;

    oTitle1.onOff = true;
    oTitle2.onOff = true;

    window.onscroll = function () {
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if (getTop(oMore) + oMore.offsetHeight <= document.documentElement.clientHeight + scrollTop && flag) {
            getAjax('', false);
        }
    }

    for(var i = 0, length1 = aSelect.length; i < length1; i++){
        aSelect[i].index = i;
        aSelect[i].addEventListener('click', leftLiClick, false);
    }

    oTitle1.addEventListener('click', function () {
        titleClick.call(oTitle1, oCon1, oCon2, oTitle2);
    }, false);

    oTitle2.addEventListener('click', function () {
        titleClick.call(oTitle2, oCon2, oCon1, oTitle1);
    }, false);

    function moveUl() {
        event.preventDefault();
        if (count == 0) {
            oldY = event.changedTouches[0].screenY;
            console.log('startOldY: ' + oldY);
            count++;
        }
        if (event.target.type == 'city') {
            console.log('screenY: ' + event.changedTouches[0].screenY);
            diffY = event.changedTouches[0].screenY - oldY;
            console.log(diffY);
            diffT += diffY;
            oldY = event.changedTouches[0].screenY;
        }
        if (diffT > 30) {
            diffT = 30;
        }
        if (diffT < (oUlHeight - 30)) {
            diffT = (oUlHeight - 30);
        }
        oUl.style.transform = 'translate3d(0px, '+ diffT +'px, 0px)';
    }

    function resetUl() {
        var oTime = null;
        oldY = 0;
        count = 0;
        clearInterval(oTime);
        if (diffT > 0) {
            oTime = setInterval(function () {
                if (diffT <= 0) {
                    diffT = 0;
                    clearInterval(oTime);
                    oUl.style.transform = 'translate3d(0px, '+ diffT +'px, 0px)';
                } else {
                    diffT -= 10;
                    oUl.style.transform = 'translate3d(0px, '+ diffT +'px, 0px)';
                }
            }, 30);
        }
        if (diffT < oUlHeight) {
            oTime = setInterval(function () {
                if (diffT >= oUlHeight) {
                    diffT = oUlHeight;
                    clearInterval(oTime);
                    oUl.style.transform = 'translate3d(0px, '+ diffT +'px, 0px)';
                } else {
                    diffT += 10;
                    oUl.style.transform = 'translate3d(0px, '+ diffT +'px, 0px)';
                }
            }, 30);
        }
    }

    function rightLiClick() {
        arg2 = this.index;
        console.log('arg1: '+arg1+' ;arg2: '+arg2);

        oTitle2.innerHTML = this.innerHTML;
        oldLi.className = '';
        this.className = 'active';
        oldLi = this;

        getAjax('', true);
        resetDom();
    }

    function getAjax(sData, bool) {
    	oNum=document.getElementById('num');
    	var num=oNum.value;
	    var oCon = document.querySelector('.list-con');
        var aConDiv = oCon.querySelectorAll('div');
    	if (bool) {
            document.getElementById('num').value=0;
            for(var i = 0, length1 = aConDiv.length - 1; i < length1; i++){
                oCon.removeChild(aConDiv[i]);
            }
        }
        ajax({
            method: 'post',
            url: '../../getMoreQuestion',
            data: 'arg1='+arg1+'&arg2='+arg2+'&num='+num,
            success: function (data) {
                var data = JSON.parse(data);
               
				
                if (!data.length) {
                    flag = false;
                    return false;
                }
				oNum.value=parseInt(num)+data.length;
                if (data.length < 10) {
                    oMore.innerHTML = '已经没有更多内容了';
                    flag = false;
                }
                for(var i = 0, length1 = data.length; i < length1; i++){
                    var newDiv = document.createElement('div');
                    newDiv.innerHTML = '<a href="' + data[i]['url'] + '">' + data[i]['title'] + '</a><p><span>' + data[i]['date'] + '</span></p>';
                    oCon.insertBefore(newDiv, oMore);
                }
            }
        })
    }

    function leftLiClick() {
        oldSelect.className = '';
        this.className = 'active';
        oldSelect = this;
		
        oldUl.style.display = 'none';
        aUl[this.index].style.display = 'block';
        oldUl = aUl[this.index];

        oTitle1.innerHTML = this.innerHTML;
        oTitle2.innerHTML = '全部科目';

        for(var i = 0, length1 = aUl.length; i < length1; i++){
            var aLi = aUl[i].querySelectorAll('li');
            for(var j = 0, length2 = aLi.length; j < length2; j++){
                aLi[j].className = '';
            }
            aLi[0].className = 'active';
        }

        arg1 = this.index;
        arg2 = 0;
        
        console.log('arg1: '+arg1+' ;arg2: '+arg2);

        getAjax('', true);
        resetDom();
    }

    function resetDom() {
        oTitle1.onOff = true;
        oTitle2.onOff = true;
        oCon1.style.display = 'none';
        oCon2.style.display = 'none';
        oTitle1.className = '';
        oTitle2.className = '';
        delDom();
    }

    function titleClick(obj1, obj2, obj3) {
        if (this.onOff) {
            var _this = this;
            obj1.style.display = 'block';
            obj2.style.display = 'none';
            this.className = 'active';
            obj3.className = 'none';
            if (!obj3.onOff) {
                obj3.onOff = true;
            }
            delDom();
            addDom();

            document.querySelector('.newDom').addEventListener('click', function () {
                clearCon.call(_this);
                _this.onOff = !_this.onOff;
            }, false);

            if (obj1 == oCon1) {
                oUl = oCon1.querySelector('ul');
                oUlHeight = -oUl.clientHeight + oCon1.clientHeight;
                document.documentElement.addEventListener('touchmove', moveUl, false);
                document.documentElement.addEventListener('touchend', resetUl, false);
            }

            if (obj1 == oCon2) {
                for(var i = 0, length1 = aUl.length; i < length1; i++){
                    if (getStyle(aUl[i], 'display') == 'block') {
                        var aLi = aUl[i].querySelectorAll('li');
                        oUl = aUl[i];
                        oUlHeight = -oUl.clientHeight + oCon2.clientHeight;
                        document.documentElement.addEventListener('touchmove', moveUl, false);
                        document.documentElement.addEventListener('touchend', resetUl, false);
                        if (!oldLi) oldLi = aLi[0];
                        for(var j = 0, length2 = aLi.length; j < length2; j++){
                            aLi[j].index = j;
                            aLi[j].addEventListener('click', rightLiClick, false);
                        }
                    }
                }
            }
        } else {
            clearCon.call(this);
        }
        this.onOff = !this.onOff;
    }

    function clearCon() {
        oCon1.style.display = 'none';
        oCon2.style.display = 'none';
        this.className = '';
        delDom();
    }

    function addDom() {
        var newDom = null;
        newDom = document.createElement('div');
        newDom.setAttribute('class', 'newDom');
        newDom.style.top = oConTop + 'px';
        newDom.style.display = 'block';
        document.body.insertBefore(newDom, oList);
    }

    function delDom() {
        var newDom = document.querySelector('.newDom');
        if (newDom) document.body.removeChild(newDom);
        document.documentElement.removeEventListener('touchmove', moveUl, false);
        document.documentElement.removeEventListener('touchend', resetUl, false);
    }

    function getTop(obj) {
        var iTop = 0;
        while(obj) {
            iTop += obj.offsetTop;
            obj = obj.offsetParent;
        }
        return iTop;
    }

    function getStyle(obj, attr) {
        return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, 0)[attr];
    }

    function ajax(jax) {
        var method = jax.method || 'get';
        var url = jax.url;
        var data = jax.data;
        var success = jax.success;
        var xhr = null;

        try {
            xhr = new XMLHttpRequest();
        } catch(e) {
            xhr = new ActiveXObject('Microsort.XMLHTTP');
        }

        if (method == 'get' && data) {
            url += '?' + data;
        }

        xhr.open(method, url, true);

        if (method == 'get') {
            xhr.send();
        } else {
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.send(data);
        }
        
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    success && success(xhr.responseText);
                } else {
                    console.log("Error: " + xhr.status);
                }
            }
        }
    }
}